<template>
  <div class="main">
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">
            <DetailFormProvider :disabled="!isDetail">
              <div class="batch-title">征集信息</div>
              <div
                class="ac-card"
                style="padding-bottom: 0"
              >
                <NSpace>
                  <NForm
                    ref="formRef2"
                    :model="formData"
                    require-mark-placement="left"
                    :rules="rules"
                    label-placement="left"
                    :label-width="160"
                    label-align="right"
                    :disabled="isDetail"
                  >
                    <NSpace>
                      <NFormItem
                        label="征集方式:"
                        path="collectTypeCode"
                      >
                        <NTreeSelect
                          :options="clueMethodOptions"
                          v-model:value="formData.collectTypeCode"
                          placeholder="请选择征集方式"
                          clearable
                          style="width: 450px;margin-right: 20px;'"
                          key-field="code"
                          label-field="name"
                          @update-value="changeTree"
                        />
                      </NFormItem>
                      <NFormItem
                        label="接收时间:"
                        path="receiveTime"
                      >
                        <NDatePicker
                          v-if="!isDetail"
                          input-readonly
                          v-model:formatted-value="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetime"
                          default-time="00:00:00"
                          style="width: 450px"
                          placeholder="请选择接收时间"
                        />
                        <NInput
                          v-else
                          v-model:value="datetime"
                          placeholder="接收时间"
                          style="width: 450px"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="接收人:"
                        path="receiveUser"
                      >
                        <NInput
                          v-model:value="formData.receiveUser"
                          placeholder="请输入接收人"
                          @update:value="change1"
                          style="width: 450px;margin-right: 20px;'"
                        />
                      </NFormItem>
                      <NFormItem
                        label="交送单位:"
                        path="deliveryUnit"
                      >
                        <NInput
                          v-model:value="formData.deliveryUnit"
                          placeholder="请输入交送单位"
                          @update:value="change2"
                          style="width: 450px"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="移交人:"
                        path="transferUser"
                      >
                        <NInput
                          v-model:value="formData.transferUser"
                          placeholder="请输入移交人"
                          @update:value="change3"
                          style="width: 450px;margin-right: 20px;'"
                        />
                      </NFormItem>
                      <NFormItem
                        label="移交人联系方式:"
                        path="transferUserPhone"
                      >
                        <NInput
                          v-model:value="formData.transferUserPhone"
                          placeholder="输入移交人联系方式"
                          style="width: 450px"
                          @update:value="change4"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="督交人:"
                        path="supervisor"
                      >
                        <NInput
                          v-model:value="formData.supervisor"
                          placeholder="请输入督交人"
                          style="width: 450px"
                          @update:value="change5"
                        />
                      </NFormItem>
                    </NSpace>
                  </NForm>
                </NSpace>
              </div>
              <div class="br"></div>

              <div class="batch-title">物品信息</div>
              <div
                class="ac-card"
                style="padding-bottom: 0"
              >
                <NSpace>
                  <NForm
                    ref="formRef"
                    :model="formData"
                    :rules="rules"
                    label-placement="left"
                    :label-width="160"
                    require-mark-placement="left"
                    label-align="right"
                    :disabled="isDetail"
                  >
                    <NSpace>
                      <NFormItem
                        label="类型："
                        path="type"
                        :rule="
                          !isDetail
                            ? {
                                required: true,
                                message: '类型必填',
                                validator: () => validatorTypeFormItem()
                              }
                            : undefined
                        "
                      >
                        <NSpace v-if="!isDetail">
                          <!-- !isDetail && (!isUpdate || (isUpdate && !formData.itemTypeName)) -->
                          <NSelect
                            v-model:value="oneSelectValue"
                            :options="(oneSelectOptions as unknown as SelectOption[])"
                            :loading="oneSelectLoading"
                            :disabled="isDetail || oneSelectLoading"
                            style="margin-right: 10rem; width: 350px"
                          />
                          <NSelect
                            v-model:value="twoSelectValue"
                            :options="(twoSelectOptions as unknown as SelectOption[])"
                            :loading="twoSelectLoading"
                            :disabled="isDetail || oneSelectLoading || twoSelectLoading"
                            style="margin-right: 10rem; width: 350px"
                          />
                          <NSelect
                            v-model:value="threeSelectValue"
                            clearable
                            :options="(threeSelectOptions as unknown as SelectOption[])"
                            :disabled="
                              isDetail || oneSelectLoading || twoSelectLoading || threeSelectLoading
                            "
                            :loading="threeSelectLoading"
                            style="width: 350px"
                          />
                        </NSpace>

                        <NInput
                          v-else
                          disabled
                          :value="formData.itemTypeName"
                          style="width: 1090px"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="名称:"
                        path="itemName"
                      >
                        <NInput
                          v-model:value="formData.itemName"
                          placeholder="输入名称"
                          @update:value="change6"
                          style="width: 450px;margin-right: 20px;'"
                        />
                      </NFormItem>
                      <NFormItem
                        label="数量:"
                        path="itemNum"
                      >
                        <NInput
                          v-model:value="formData.itemNum"
                          placeholder="输入数量"
                          style="width: 450px"
                          @input="change7"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="规格:"
                        path="specifications"
                      >
                        <NInput
                          v-model:value="formData.specifications"
                          placeholder="请输入规格"
                          clearable
                          @update:value="change8"
                          style="width: 450px;margin-right: 20px;'"
                        />
                      </NFormItem>
                      <NFormItem
                        label="材质:"
                        path="materialQuality"
                      >
                        <NInput
                          v-model:value="formData.materialQuality"
                          placeholder="输入材质"
                          @update:value="change9"
                          style="width: 450px"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="装帧:"
                        path="binding"
                      >
                        <NInput
                          v-model:value="formData.binding"
                          placeholder="请输入装帧"
                          @update:value="change10"
                          style="width: 450px;margin-right: 20px;'"
                        />
                      </NFormItem>
                      <NFormItem
                        label="品相:"
                        path="appearance"
                      >
                        <NInput
                          v-model:value="formData.appearance"
                          placeholder="请输入品相"
                          @update:value="change11"
                          style="width: 450px"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="年代:"
                        path="years"
                      >
                        <NInput
                          v-model:value="formData.years"
                          placeholder="请输入年代"
                          @update:value="change12"
                          style="width: 450px;margin-right: 20px;'"
                        />
                      </NFormItem>
                      <NFormItem
                        label="出版社:"
                        path="press"
                      >
                        <NInput
                          v-model:value="formData.press"
                          placeholder="请输入出版社"
                          style="width: 450px"
                          @update:value="change13"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="语种:"
                        path="language"
                      >
                        <NInput
                          v-model:value="formData.language"
                          placeholder="请输入语种"
                          @update:value="change14"
                          style="width: 450px;margin-right: 20px;'"
                        />
                      </NFormItem>
                      <NFormItem
                        label="备注:"
                        path="notes"
                      >
                        <NInput
                          v-model:value="formData.notes"
                          placeholder="请输入备注"
                          style="width: 450px"
                          @update:value="change15"
                          type="textarea"
                          :autosize="{
                            minRows: 1,
                            maxRows: 5
                          }"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="开始时间:"
                        path="startDate"
                        v-if="isTrue"
                      >
                        <NDatePicker
                          input-readonly
                          v-model:formatted-value="datetimeT"
                          value-format="yyyy-MM-dd"
                          type="date"
                          style="width: 450px;margin-right: 20px;'"
                          placeholder="输入开始时间"
                        />
                      </NFormItem>
                      <NFormItem
                        label="结束时间:"
                        path="endDate"
                        v-if="isTrue"
                      >
                        <NDatePicker
                          input-readonly
                          v-model:formatted-value="datetimeEnd"
                          value-format="yyyy-MM-dd"
                          type="date"
                          style="width: 450px"
                          placeholder="输入结束时间"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="代存期限:"
                        path="depositTerm"
                        v-if="isTrue"
                      >
                        <NInput
                          v-model:value="formData.depositTerm"
                          placeholder="请输入代存期限"
                          @update:value="change16"
                          style="width: 450px;margin-right: 20px;'"
                        />
                      </NFormItem>
                      <NFormItem
                        label="图片:"
                        path="fileIds"
                      >
                        <VUpload
                          :file-list="fileListImg"
                          @getList="handleUploadList"
                          style="width: 450px"
                          v-if="!isDetail"
                          :max="5"
                        />
                        <VAttachments
                          v-else
                          :attach-list="formData.imagesList"
                        ></VAttachments>
                      </NFormItem>
                    </NSpace>
                  </NForm>
                </NSpace>
                <div class="br"></div>
                <div class="batch-title">其他信息</div>
                <NFormItem
                  label="附件："
                  label-placement="left"
                >
                  <UploadFileV2
                    v-if="!isDetail"
                    :file-list="fileList"
                    :disabled="isDetail"
                    @update:file-list="handleUpdateFileList"
                  >
                    <template #trigger="{ handleClick }">
                      <n-button
                        @click="handleClick"
                        color="#6CB187"
                        ghost
                        size="small"
                      >
                        点击上传
                      </n-button>
                    </template>
                  </UploadFileV2>
                  <FileList
                    v-else
                    :file-list="fileList"
                  />
                </NFormItem>
              </div>
            </DetailFormProvider>
            <div class="topTitle">鉴定详情</div>
            <NSpace style="margin: 15px 0">
              <div class="blue"></div>
              <div class="font">{{ route.params.type === 'A3101' ? '真伪鉴定' : '价值鉴定' }}</div>
            </NSpace>
            <div class="table">
              <NDataTable
                :bordered="false"
                :columns="columns"
                :data="tableData"
                :loading="tableLoading"
                :pagination="false"
                striped
                :rowKey="rowKey"
              />
            </div>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <NSpace justify="start">
      <NButton
        style="width: 78px; color: #5fb17f"
        ghost
        @click="goBack"
      >
        <template #icon>
          <img
            :src="VBackImg"
            style="width: 25rem; height: 25rem"
          />
        </template>
        返回
      </NButton>
    </NSpace>
  </FixedAction>
</template>
<script setup lang="ts">
import {
  NFormItem,
  NInput,
  type FormInst,
  NSpace,
  NButton,
  NScrollbar,
  NDataTable,
  useMessage,
  NSpin,
  type UploadFileInfo,
  type SelectOption,
  NTreeSelect,
  NSelect,
  NDatePicker,
  NForm
} from 'naive-ui'
import router from '@/router'
import { useRoute } from 'vue-router'
import { ref, computed, watch, reactive, shallowRef, toRaw, type Ref } from 'vue'
import { useTagStore } from '@/stores/layout'
import type { DicTreeModel } from '@/api/dic'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import DynamicPageForm from './DynamicPageForm.vue'
import type { ModelJson } from './DynamicFormTypes'
import type { HttpResponse, HttpResponsePagination, JsonHttpResponse } from '@/utils/http'
import type { itemModel } from '@/api/item'
import { keysOf } from '@/utils/object'
import { mergeWith, isArray } from 'lodash-es'
import type { CTSelectOption } from '@/api/collection'
import FileList from '@/components/FileList.vue'
import VAttachments from '@/views/OA/Common/Attachments.vue'
// import VUpload from './Upload.vue'
import UploadFileV2 from '@/views/common/UploadFileV2.vue'
import VBackImg from '@/assets/images/back.png'

const tags = useTagStore().tags
const route = useRoute()
const message = useMessage()
const isUpdate = route.query.type === 'update'
const isDetail = route.query.type === 'detail'
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    queryTableData()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    queryTableData()
  }
})

const datetime = computed<any>({
  get() {
    return formData.value.receiveTime
  },
  set(v) {
    formData.value.receiveTime = v
  }
})
const datetimeT = computed<any>({
  get() {
    return formData.value.startDate
  },
  set(v) {
    formData.value.startDate = v
  }
})
const datetimeEnd = computed<any>({
  get() {
    return formData.value.endDate
  },
  set(v) {
    formData.value.endDate = v
  }
})
const rules = {
  collectTypeCode: {
    required: true,
    message: '请选择征集方式',
    trigger: ['change', 'blur']
  },
  receiveTime: {
    required: true,
    message: '请选择接收时间',
    trigger: ['change', 'blur']
  },
  receiveUser: {
    required: true,
    message: '请输入接收人',
    trigger: ['change', 'blur', 'input']
  },
  transferUser: {
    required: true,
    message: '请输入移交人',
    trigger: ['change', 'blur', 'input']
  },
  supervisor: {
    required: true,
    message: '请输入督交人',
    trigger: ['change', 'blur', 'input']
  },
  itemName: {
    required: true,
    message: '请输入名称',
    trigger: ['change', 'blur']
  },
  itemNum: {
    required: true,
    trigger: ['change', 'blur', 'input'],
    validator: () => {
      if (!formData.value.itemNum) return new Error('请输入数量')
      return true
    }
  }
}
// 附件
const handleUploadList = (v: any) => (formData.value.imgIds = v)
const createQuerySelectOptions = (
  options: Ref<CTSelectOption[]>,
  loading: Ref<boolean>,
  onFinish?: () => void
) => {
  return async (parentCode?: string) => {
    try {
      loading.value = true
      const [error, res] = await sendRequest<HttpResponse<CTSelectOption[]>>({
        module: 'collection',
        api: 'typeSelectByCode',
        override: {
          params: {
            parentCode: parentCode || null
          }
        }
      })
      if (error) throw error
      if (res.code !== 0) throw new Error(res.msg)
      options.value = res.data
      onFinish?.()
    } catch (error) {
      console.log(error)
    } finally {
      loading.value = false
    }
  }
}
const createAutoSelectFirstItem = (value: Ref<string | null>, options: Ref<CTSelectOption[]>) => {
  return () => {
    if (options.value.length > 0) {
      value.value = options.value[0].value
    }
  }
}
const createCascader = (
  configs: {
    value: Ref<string | null>
    options: Ref<CTSelectOption[]>
    loading: Ref<boolean>
    autoSelectFirst: boolean
    onFinish?: () => void
  }[]
) => {
  const queryFuncList = configs.map((config) => {
    const autoSelect = config.autoSelectFirst
      ? createAutoSelectFirstItem(config.value, config.options)
      : undefined
    return createQuerySelectOptions(config.options, config.loading, () => {
      autoSelect?.()
      config.onFinish?.()
    })
  })

  for (let i = 0; i < configs.length - 1; i++) {
    if (!configs[i + 1]) continue

    let flag = false
    watch(
      configs[i].value,
      (v) => {
        if (isUpdate && !flag && v) {
          console.log('ins')
          flag = true
        } else {
          configs[i + 1].options.value = []
          configs[i + 1].value.value = null
        }

        if (!v) return
        queryFuncList[i + 1](v)
      },
      { immediate: true }
    )
  }

  return queryFuncList[0]
}

const oneSelectValue = ref<string | null>(null)
const oneSelectOptions = shallowRef<CTSelectOption[]>([])
const oneSelectLoading = ref(false)

const twoSelectValue = ref<string | null>(null)
const twoSelectOptions = shallowRef<CTSelectOption[]>([])
const twoSelectLoading = ref(false)

const threeSelectValue = ref<string | null>(null)
const threeSelectOptions = shallowRef<CTSelectOption[]>([])
const threeSelectLoading = ref(false)

const isUseLastSelect = ref(true)
const cascader = createCascader([
  {
    value: oneSelectValue,
    options: oneSelectOptions,
    loading: oneSelectLoading,
    autoSelectFirst: false
  },
  {
    value: twoSelectValue,
    options: twoSelectOptions,
    loading: twoSelectLoading,
    autoSelectFirst: false
  },
  {
    value: threeSelectValue,
    options: threeSelectOptions,
    loading: threeSelectLoading,
    autoSelectFirst: false,
    onFinish: () => (isUseLastSelect.value = threeSelectOptions.value.length > 0)
  }
])
const formInst = ref<FormInst | null>(null)
const formData = ref({} as any)
const handleUpdateFormData = (key: string, value: unknown) => {
  formData.value[key] = value
}
const fileList = ref<UploadFileInfo[]>([])
const fileListImg = ref<UploadFileInfo[]>([])
const handleUpdateFileList = (e: UploadFileInfo[]) => {
  fileList.value = e
}
const validatorTypeFormItem = () => {
  if (isUseLastSelect.value) return threeSelectValue.value !== null
  return twoSelectValue.value !== null
}
const validate = (form: FormInst | null): Promise<void> => {
  if (!form) return Promise.resolve()

  return new Promise((resolve, reject) => {
    form.validate((error) => {
      if (error) {
        reject()
      } else {
        resolve()
      }
    })
  })
}
const clueMethodOptions = reactive<DicTreeModel[]>([])
const queryClueMethodOptions = async () => {
  try {
    const [error, res] = await sendRequest<HttpResponse<DicTreeModel[]>>({
      module: 'dic',
      api: 'getTree',
      override: {
        params: {
          dicCode: 'A30'
        }
      }
    })

    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    clueMethodOptions.push(...(res.data[0] ? res.data[0].children || [] : []))
    console.log(clueMethodOptions)
  } catch (error) {
    console.error(error)
  }
}
//去除空格
const change1 = (v: any) => {
  formData.value.receiveUser = v.trim()
}
const change2 = (v: any) => {
  formData.value.deliveryUnit = v.trim()
}
const change3 = (v: any) => {
  formData.value.transferUser = v.trim()
}
const change4 = (v: any) => {
  formData.value.transferUserPhone = v.trim()
}
const change5 = (v: any) => {
  formData.value.supervisor = v.trim()
}
const change6 = (v: any) => {
  formData.value.itemName = v.trim()
}
const change7 = (v: any) => {
  formData.value.itemNum = v.replace(/[^\d]/g, '')
}
const change8 = (v: any) => {
  formData.value.specifications = v.trim()
}
const change9 = (v: any) => {
  formData.value.materialQuality = v.trim()
}
const change10 = (v: any) => {
  formData.value.binding = v.trim()
}
const change11 = (v: any) => {
  formData.value.appearance = v.trim()
}
const change12 = (v: any) => {
  formData.value.years = v.trim()
}
const change13 = (v: any) => {
  formData.value.press = v.trim()
}
const change14 = (v: any) => {
  formData.value.language = v.trim()
}
const change15 = (v: any) => {
  formData.value.notes = v.trim()
}
const change16 = (v: any) => {
  formData.value.depositTerm = v.trim()
}

const isTrue = ref(false)
const changeTree = (v: any) => {
  formData.value.collectTypeCode = v
  if (formData.value.collectTypeCode === 'A3007') {
    isTrue.value = true
  } else {
    isTrue.value = false
  }
}
const baseModel: ModelJson = {
  elements: [
    {
      type: 'NInput',
      key: 'itemName',
      label: '名称：'
    },
    {
      type: 'NDatePicker',
      key: 'receiveTime',
      label: '接收时间：',
      props: { type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss' },
      style: { flex: 1 }
    },
    {
      type: 'NSelect',
      key: 'collectTypeCode',
      label: '征集方式：',
      props: {
        options: clueMethodOptions,
        valueField: 'code',
        labelField: 'name'
      }
    },
    {
      type: 'NInputNumber',
      key: 'itemNum',
      label: '数量：',
      style: { flex: 1 },
      props: {
        showButton: false,
        min: 0
      }
    },
    {
      type: 'NInput',
      key: 'receiveUser',
      label: '接收人：'
    },
    {
      type: 'NInput',
      key: 'notes',
      label: '征集备注：'
    }
  ]
}

const rowKey: any = (row: any) => row.id || ''
const columns = ref<any>([
  {
    title: '序号',
    key: 'orderIndex',
    render: (_: any, i: any) => {
      return ++i + (paginationReactive.page - 1) * paginationReactive.pageSize
    },
    width: '5rem',
    align: 'center'
  },
  {
    title: '鉴定专家',
    key: 'userName',
    width: 100
  },
  {
    title: '鉴定真伪',
    key: 'status',
    width: 100
  },
  {
    title: '意见',
    key: 'opinion',
    width: 120
  }
])

// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)

  tags.splice(index, 1)
  if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}
// 获取详情
const spinShow = ref(false)
const getDispatchInfo = async () => {
  // columns.value[2].key = route.params.type === 'A3101' ? 'identifyTypeCode' : 'identifyValue'
  columns.value[2].title = route.params.type === 'A3101' ? '鉴定真伪' : '价格评估'
  spinShow.value = true
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'item',
    api: 'itemIdInfo',
    uri: {
      itemId: route.params.id as never
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  // await setModelJson(res.data.itemTypeCode)
  const { data } = res
  changeTree(data.collectTypeCode)
  fileList.value = data.fileList?.map((e: any, i: number) => {
    const f = new File([e.name], e.name, { type: e.type })
    // @ts-ignore
    f.remoteId = e.id
    return {
      id: i,
      name: e.name,
      file: f,
      status: 'finished',
      url: e.path,
      remoteId: e.id
    }
  })
  keysOf(data).forEach((e) => {
    {
      formData.value[e] = data[e] as never
      if (e === 'startDate') {
        formData.value.startDate = data.startDate ? data.startDate.slice(0, 10) : null
      }
      if (e === 'endDate') {
        formData.value.endDate = data.endDate ? data.endDate.slice(0, 10) : null
      }
      // if (e === 'fullCode') {
      //   if (data.fullCode) {
      //     data.fullCode = data.fullCode.split('>')
      //     if (data.fullCode.length == 1) {
      //       oneSelectValue.value = data.fullCode[0]
      //     }
      //     if (data.fullCode.length == 2) {
      //       oneSelectValue.value = data.fullCode[0]
      //       twoSelectValue.value = data.fullCode[1]
      //     }
      //     if (data.fullCode.length == 3) {
      //       oneSelectValue.value = data.fullCode[0]
      //       twoSelectValue.value = data.fullCode[1]
      //       threeSelectValue.value = data.fullCode[2]
      //     }
      //   }
      // }
    }
  })
  spinShow.value = false
}
const tableLoading = ref(false)
const tableData = ref<itemModel[]>([])
const queryTableData = async () => {
  tableLoading.value = true
  const [error, res] = await sendRequest<HttpResponsePagination<itemModel>>({
    module: 'item',
    api: 'expertList',
    override: {
      params: {
        identifyId: route.params.identifyId,
        subItemId: route.params.subItemId
      }
    }
  })
  tableLoading.value = false
  if (error) return message.error(error.message)
  // @ts-ignore
  tableData.value = res.data
  tableData.value.forEach((e) => {
    // @ts-ignore
    e.status = e.status ? (e.status == 1 ? '伪' : e.status == 2 ? '无法确定' : '') : '真'
  })
}
//处理json字符串
// const model = shallowRef<ModelJson>(baseModel)
// const queryTypeJson = async (code: string): Promise<ModelJson> => {
//   try {
//     const [error, res] = await sendRequest<JsonHttpResponse<ModelJson>>({
//       module: 'collection',
//       api: 'jsonContent',
//       override: {
//         params: {
//           name: `${code}.json`
//         }
//       }
//     })
//     if (error) throw error
//     if (res.code !== 200) throw new Error(res.message)
//     return res.data
//   } catch (error) {
//     console.error(error)
//     return toRaw(baseModel)
//   }
// }
// const setModelJson = async (code?: string | null) => {
//   if (!code) return (model.value = toRaw(baseModel))
//   model.value = mergeWith({}, toRaw(baseModel), await queryTypeJson(code), (obj: any, src: any) => {
//     if (isArray(obj)) return [...obj, ...src]
//   }) as ModelJson
// }

watch(
  () => route,
  () => {
    if (route.name == 'CollectingItemsDetailtem') {
      getDispatchInfo()
      queryTableData()
      queryClueMethodOptions()
    }
  },
  { deep: true, immediate: true }
)
</script>
<style scoped lang="scss">
@mixin CommonFont {
  font-size: 18rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
}
.blue {
  width: 3px;
  height: 20px;
  background-color: #10b770;
  margin-top: 4px;
}

.font {
  font-size: 18px;
  font-weight: 700;
}
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .topTitle {
      font-size: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5fb17f;
      margin-bottom: 10rem;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;
      @include CommonFont;

      .basin-info {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        border-bottom: 1px dashed #bc9e70;
        margin-bottom: 20rem;

        .basin-left {
          flex: 0 0 40%;
        }

        .box {
          display: flex;
          margin-bottom: 20rem;
          font-size: 16rem;

          span:first-child {
            display: inline-block;
            width: 130rem;
          }

          span:last-child {
            display: inline-block;
            flex: 1;
          }
        }
      }

      .approve {
        display: flex;
        width: 100%;
        margin-bottom: 20rem;
        border-bottom: 1px dashed #bc9e70;

        .box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-width: 100rem;
          width: auto;
          height: 90rem;
          border-radius: 4px;
          border: 1px solid #d9d9d9;
          padding: 12rem;
          margin-right: 10rem;
          margin-bottom: 20rem;
        }
      }

      .table {
        width: 80%;
        background-color: #ebeceb;
      }
    }
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
.batch-title {
  padding: 15rem 20rem;
  font-size: 16px;
  border-bottom: 1px solid #ffffff;
  margin-bottom: 20rem;
  color: rgba(0, 0, 0, 0.85);
}
.add-collect {
  min-height: 100%;
  padding: 15rem 0 130rem;
  background-color: #f0efee;

  .br {
    position: relative;
    width: 100%;
    padding: 30rem 0;

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      top: 50%;
      left: 0;
      border-top: 1px dotted #bc9e70;
      transform: translateY(-50%);
    }
  }

  .ac-card {
    padding: 20rem;
    background-color: #e1e1e1;
  }

  .ac-title {
    font-size: 26rem;
    margin-bottom: 30rem;
    color: #048c5e;
    line-height: 1;
  }
}

.add-collect-buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 16rem;

  .n-button:not(.back) {
    width: 100rem;
    height: 50rem;
  }

  &.start {
    justify-content: flex-start;
  }
}
</style>
